<template>
    <div>
        <!--查询框-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="账号:">
                <el-input v-model="formInline.account" placeholder="请输入账户"></el-input>
            </el-form-item>
            <el-form-item label="密码:">
                <el-input v-model="formInline.password" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="getData()" icon="el-icon-search">查询</el-button>
                <el-button type="primary" @click="dialogVisible = true" icon="el-icon-add">新建</el-button>
            </el-form-item>
        </el-form>

        <!--表格-->
        <el-table id="customerList" :data="tableData" height="500px" max-height="500px" size="500px" :highlight-current-row="true" style="width: 100%" class="c-no-wrap">
            <el-table-column align="center" label="账号" prop="account"></el-table-column>
            <el-table-column align="center" label="密码" prop="password"></el-table-column>
            <el-table-column align="center" label="姓名" prop="username"></el-table-column>
            <el-table-column align="center" label="联系电话" prop="phone"></el-table-column>
            <el-table-column align="center" label="邮寄地址" prop="address"></el-table-column>
            <el-table-column align="center" label="余额" prop="balance"></el-table-column>
            <el-table-column align="center" label="创建时间" prop="create_time"></el-table-column>
            <el-table-column align="center" label="修改时间" prop="update_time"></el-table-column>
            <el-table-column align="center" label="操作" >
                <template slot-scope="scope">
                    <el-button type="text" @click="handleClick(scope.row)">编辑</el-button>
                    <el-button type="text" @click="rechargeClick(scope.row)">充值</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!--分页-->
        <div>
            <pageHelper :current-page="currentPage" :total="total" @sizeChange="handleSizeChange"
                        @currentChange="handleCurrentChange"></pageHelper>
        </div>

        <!--账户框-->
        <el-dialog title="账户信息" :visible.sync="dialogVisible" width="500px">
            <template>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="账户:">
                        <el-input v-model="form.account" placeholder="请输入账户"></el-input>
                    </el-form-item>
                    <el-form-item label="密码:">
                        <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <el-input v-model="form.username" placeholder="请输入姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话:">
                        <el-input v-model="form.phone" placeholder="请输入电话"></el-input>
                    </el-form-item>
                    <el-form-item label="地址:">
                        <el-input v-model="form.address" placeholder="请输入地址"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="submitUser">创建</el-button>
                        <el-button @click="closeDialog">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>

        <el-dialog title="充值" :visible.sync="dialogVisible1" width="500px">
            <template>
                <el-form ref="rechargeForm" :model="rechargeForm" :rules="rules" label-width="100px">
                    <el-form-item label="账户:">
                        <span>{{ rechargeForm.account}}</span>
                    </el-form-item>
                    <el-form-item label="姓名:">
                        <span>{{ rechargeForm.username }}</span>
                    </el-form-item>
                    <el-form-item label="充值金额:">
                        <el-input v-model="rechargeForm.rechargeMoney" type="number" placeholder="请输入金额"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="recharge">充值</el-button>
                        <el-button @click="closeDialog1">取消</el-button>
                    </el-form-item>
                </el-form>
            </template>
        </el-dialog>

    </div>

</template>

<script>
    import axios from 'axios';
    import pagination from '@/component/pagination';
    import {mytips} from '@/module/tools';
    import pageHelper from '../common/pageHelper';

    document.title='客户列表';
    export default {
        name: 'customerList',
        components: {pagination,pageHelper},
        data() {
            return {
                form: {
                    account: '',
                    password: '',
                    username: '',
                    phone: '',
                    address: ''
                },
                formInline: {
                    account: '',
                    password: '',
                },
                rechargeForm: {
                    account: '',
                    username: '',
                    rechargeMoney: null
                },
                rules: {
                  rechargeMoney: [
                      {required: true,type: 'number',message: '请输入数字金额',trigger: 'change'}
                  ]
                },
                editItem: null,
                dialogVisible: false,
                dialogVisible1: false,
                //表格数据
                tableData: [],
                totalPage: 0,
                currentPage: 1,
                pageSize: 10,
                total: 0,
                loading: null
            };
        },

        mounted() {
            this.getData();
        },
        methods: {
            /*翻页跳转处理，传入页数*/
            getData: function (page,size) {
                page = page || 1;
                size = size || 10;

                let target = document.getElementById('customerList');
                this.loading = this.$loading({
                    text: '加载中...',
                    background: 'rgba(0,0,0,0,1)',
                    target: target,
                    spinner: 'el-icon-loading'
                });
                axios.post(
                    API_PATH + "/am/customer",
                    {
                        page: page,
                        pageSize: size,
                        account: this.formInline.account,
                        password: this.formInline.password
                    }
                ).then(
                    res => {
                        this.loading.close();
                        if (res.data.code == 0) {
                            this.tableData = res.data.data.list;
                            this.totalPage = Math.ceil(res.data.data.total / size);
                            this.total = Math.ceil(res.data.data.total);
                            this.pageSize = size;
                            this.currentPage = page;
                        }
                    },
                    xhr => this.loading.close()
                );
            },
            submitUser() {
                if (! this.form.account) {
                    mytips('请输入账号');
                    return false;
                }
                if (! this.form.password) {
                    mytips('请输入密码');
                    return false;
                }
                if (! this.form.username) {
                    mytips('请输入姓名');
                    return false;
                }
                if (! this.form.phone) {
                    mytips('请输入号码');
                    return false;
                }
                if (! this.form.address) {
                    mytips('请输入地址');
                    return false;
                }

                this.closeDialog();
                mytips('提交成功');
                axios.post(
                    API_PATH + '/submitUser',
                    {
                        account: this.form.account,
                        password: this.form.password,
                        username: this.form.username,
                        phone: this.form.phone,
                        address: this.form.address
                    }
                ).then(res => {
                    if (res.data.code == 0) {
                        this.closeDialog();
                        mytips('提交成功');
                        this.getData();
                    }
                })
            },
            recharge() {
                if (! this.rechargeForm.rechargeMoney) {
                    mytips('请输入金额');
                    return false;
                }
                //充值
                axios.post(
                    API_PATH + "/customerFund/recharge",
                    {
                        rechargeCustomerId: this.rechargeForm.account,
                        amount: this.rechargeForm.rechargeMoney
                    }
                ).then(res => {
                    if (res.data.code == 0) {
                        this.closeDialog1();
                        mytips('充值成功');
                        this.getData();
                    }
                })
            },
            closeDialog() {
                this.dialogVisible = false;
                this.form.account = '';
                this.form.password = '';
                this.form.username = '';
                this.form.phone = '';
                this.form.address = '';
            },
            closeDialog1() {
              this.dialogVisible1 = false;
              this.rechargeForm.account = '';
              this.rechargeForm.username = '';
              this.rechargeForm.rechargeMoney = null;
            },
            //每页显示多少条
            handleSizeChange(size) {
                this.pageSize = size;
                this.getData(1,this.pageSize);
            },
            //当前页
            handleCurrentChange(page) {
                this.getData(page,this.pageSize)
            },
            //查看单一项
            handleClick(row) {
                //this.form = row ;会把row的地址一起传过去,会导致,如果清空this.form数据 会把原先表格数据一起取消
                //所以进行每个 值 得传递
                this.form.account = row.account;
                this.form.password = row.password;
                this.form.username = row.username;
                this.form.phone = row.phone;
                this.form.address = row.address;
                this.dialogVisible = true;
            },
            //充值框
            rechargeClick(row) {
                this.rechargeForm.account = row.account;
                this.rechargeForm.username = row.username;
                this.dialogVisible1 = true;
            }
        }
    }
</script>

